// 车险计费
<template>

<c-form-block-container :title='"计费信息"'>

    <!-- 操作按键 -->
    <div class="car-charging-btn" slot='header'>

        <c-btn-icon type='primary text' icon='icon-arrow-double-left' v-if='!showList' @click='listSwitch'></c-btn-icon>
        <c-btn-icon type='primary text' icon='icon-refresh-big' @click='toCharging'></c-btn-icon>
        
    </div>
    
    <!-- 计费信息 -->
    <div class="car-charging" v-if='chargingData.length'>  

        <l-car-charging-detailed  v-show='!showList' :hasKeys='hasKeys' :chargingData='chargingData[selected]'></l-car-charging-detailed>

        <div class="car-chargin-list" v-show='showList'>
            <Table @on-row-click='select' :data='chargingData' :columns='chargingListTitle' ellipsis highlight-row></Table>
        </div>
        
    </div>

    <div class="remind" v-if='!chargingData.length'>
        暂无信息  
    </div>

    <!-- 计费验证二维码 -->
    <l-code></l-code>

</c-form-block-container>

</template>

<script lang='ts'> 
import companyIcon from '@/components/ivew_components/company_icon/index.vue'
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
// 计费二维码
import carChargingCode from '@/components/ivew_components/car_charging_code/index.vue'
import chargingFn from '@/components/ivew_conf/car_charging_reqFn'
import carChargingDetailed from '@/components/ivew_components/car_charging/car_charging_detailed/index.vue'


type listStatus = 'open' | 'close';

@Component({
    components: {
        'l-code': carChargingCode,
        'l-car-charging-detailed': carChargingDetailed
    }
})
export default class carCharging extends Vue{
    name:string = 'car-charging'

    @Prop()
    chargingData:formInf.carChargingListItem[]

    @Prop()
    chargingSelectedCompany:string

    @Prop()
    hasKeys

    
   
    get showList() {
        return this.listStatus === 'open';
    }

    toCharging = chargingFn
    
    // 当前展示项
    selected:number = 0

    // 计费列表状态
    listStatus:listStatus = 'open' 
    
    chargingListTitle = [

        {
            title: '承保公司',
            key: 'company',
            width: 180,
            render (h, {row, column, index}){
                
                return h(companyIcon, {
                    props:{
                        company: row.company
                    }
                })
            }
        },
        {
            title: '商险保费',
            key: 'syTotal'
        },
        {
            title: '交险保费',
            key: 'jqTotal'
        },
        {
            title: '折后合计',
            key: 'total'
        }
        
    ]


    select(currentRow){
        this.selected = currentRow.index;
        this.listSwitch('close')

    }   
    
    // 是否显示列表
    listSwitch(status:listStatus){
        let defaultStatus:listStatus = this.listStatus === 'open' ? 'close' : 'open';
        this.listStatus = status || defaultStatus;
    }

    
}


</script>

<style lang='scss'>

.car-charging{

    // 修改iview表格样式
    .ivu-table-row-highlight div.ivu-table-cell{
        color: $font_light_color;
    }

    div.ivu-table::after{
        content: '';
        display: none;
    }

    .ivu-table-wrapper,
    .table,
    .tbody,
    .object{
        border: none;
    }
    
     div.ivu-table::after{
        content: '';
        display: none;
    }
    
}

.car-charging-item{

    &+&{
        margin-top: _rem(20px);
    }

}

.remind{
    text-align: center;
}

</style>